﻿@model WeddingEventManagementApp.Models.ClientMain_VM
@{
    ViewBag.Title = "Client Overview";
    var clientLetters = Model.IsotopeClients.Select(i => i.LastName[0]).Distinct().OrderBy(i => i);
    char[] alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".ToCharArray();
}

<div class="ten columns">
    <h3>Clients</h3>

    <div id="filters" class="filter-nav">
        <ul class="no-bullet alphabet clearfix">
            <li style="width: auto; margin-right: 5px;">
                <a href="#all" class="label" data-filter="*">Show All</a>
            </li>
            @foreach (char letter in alpha)
            {
                <li>
                    @if (clientLetters.Contains(letter))
                    {
                        <a href="#" data-filter=".@letter-filter">@letter</a>
                    }
                    else
                    {
                        <span>@letter</span>
                    }
                </li>
            }
        </ul>
    </div>
    <div id="isotope">
        @foreach (var client in Model.IsotopeClients)
        {
            <div id="@client.ID" class="item @client.LastName[0].ToString().ToUpper()-filter @( client.City == null ? "" : client.City.Replace(" ", ""))">
                <p class="last-updated hidden">Updated: @client.Updated.ToString("o");</p>
                <p class="last-viewed hidden">Viewed: @client.Viewed.ToString("o");</p>
                <p class="created hidden">Created: @client.Created.ToString("o");</p>
                <div class="flip">
                    <div class="front-face">
                        <img src="@string.Format(@"https://www.gravatar.com/avatar/{0}?s={1}&d=identicon", client.Gravatar, 90)">
                        <h5 class="name">@client.FirstName <br/> @client.LastName</h5>
                    </div>
                    <div class="back-face">
                        <a href="tel:@string.Format("({0}) {1}-{2} {3}", client.Phone.AreaCode, client.Phone.Exchange, client.Phone.LineNumber, client.Phone.Extension)" title="@string.Format("({0}) {1}-{2} {3}", client.Phone.AreaCode, client.Phone.Exchange, client.Phone.LineNumber, client.Phone.Extension)" class="has-tip tip-left button secondary"><i class="icon-phone"></i></a>
                        <a href="mailto:@client.Email" title="@client.Email" class="has-tip tip-left button secondary"><i class="icon-mail"></i></a>
                        @Html.ActionLink("View", "Details", "Client", new { id = client.ID }, new { @class = "button" } )
                    </div>
                </div>
            </div>
        }
    </div>
</div>
<div class="two columns">
    <div class="row ">
        <div class="twelve column">
            <div class="row">
                    @Html.ActionLink("New Client", "Create", "Client", null, new { @class = "button success expand" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="twelve column">
            
            <div class="row">
                <h4>Sorting</h4>
                <ul id="sort-by" class="no-bullet">
                    <li><a href="#created" class="label">Newest</a></li>
                    <li><a href="#viewed">Last Viewed</a></li>
                    <li><a href="#updated">Last Updated</a></li>
                </ul>
            </div>
            
            <div class="row">
                <h4>Filters</h4>
                <label>City:</label>
                <select id="city-filter" class="ddl">
                    <option value="*">All</option>
                    @foreach (var city in Model.IsotopeClients.Where(m => !string.IsNullOrEmpty(m.City) ).Select(m => m.City).Distinct().OrderBy(m=>m))
                    {
                        <option class="ddl" value=".@city.Replace(" ", "")">@city</option>
                    }
                </select>
            </div>
        </div>
    </div>

</div>

@section Scripts {
    <script src="~/Scripts/jquery.isotope.min.js"></script>
    <script src="~/Scripts/clients.js"></script>
    <script>
        $(".ddl").kendoDropDownList();
    </script>
}